<template>
	<div class="All">
		<!-- 顶部搜索框 -->
		<div class="head-search">
			<div class="">
				<el-input v-model="input1" placeholder="请输入查找的课程" suffix-icon="el-icon-search">
				</el-input>
			</div>
		</div>

		<!-- 课程列表 -->
		<div style="display: flex;align-items: center;justify-content: center;" v-if="couseList.length == 0">
			<el-empty description="空数据"></el-empty>
		</div>
		<div class="course_list" v-if="couseList.length != 0">
			<div v-for="(item,index) in couseList" :key="index" class="list_item">
				<!-- <div class="itemState" v-if="item.state == true">
					<p>合格</p>
				</div>
				<div class="itemState" v-if="item.state == false">
					<p>不合格</p>
				</div> -->
				<!-- 课程图片 -->
				<div class="item_left">
					<img alt="" :src="item.class_img">
				</div>
				<!-- 课程信息 -->
				<div class="item_right">
					<p style="font-size: 18px;">{{item.title}}</p>
					<div class="item_time">
						<i class="el-icon-time"></i>
						<p>开课日期：</p>
						<p>{{item.start_time}}</p>
					</div>
					<div class="item_info">
						<div>
							<p>结束时间：</p>
							<p style="color:#51a9ff;">{{item.end_time}}</p>
						</div>

					</div>

				</div>
				<div class="gradeInfo" @click="openGradeDet(item,index)">
					<el-button round style="background-color: #28b1ef;color: #fff;margin-top: 20px;">查看成绩</el-button>
				</div>
			</div>
		</div>

		<div class="">
			<!--       :before-close="handleClose"-->
			<el-dialog :visible.sync="dialogVisible" title="提示" width="30%">
				<div class="Center" v-loading="GradeLoading">
					<div class="title">
						<span class="" style="font-weight: 600;font-size: 23px;">
							课程总成绩:
						</span>
					</div>
					<div class="grade">
						<span
							style="font-size: 50px;font-weight: 600;color: #FF0000;">{{GreadS?GreadS:0}}</span>
						<span style="font-size: 28px;color: #FF0000;">分</span>
						<!-- video_gradedat work_grade exam_gradedat.total_score -->
					</div>
					<!-- 视频成绩 -->
					<div class="Grade_dat">
						<div class="_dat-on">
							<div class="">
								<span style="font-weight: 600;font-size: 20px;">视频课程</span>
							</div>
							<div class="">
								<span>模块分值权重<span
										style="color: #FF0000;font-weight: 600;">{{RuleS.video_ratio}}</span>%</span>
							</div>
						</div>
						<div class="_dat-bot">
							<span>此模块小计：{{video_gradedat}} X {{RuleS.video_ratio}}% =
								<span>{{(video_gradedat) * (RuleS.video_ratio/100)}}</span></span>
						</div>
					</div>
					<!-- 阶段测评 -->
					<div class="Grade_dat">
						<div class="_dat-on">
							<div class="">
								<span style="font-weight: 600;font-size: 20px;">阶段测评</span>
							</div>
							<div class="">
								<span>模块分值权重<span
										style="color: #FF0000;font-weight: 600;">{{RuleS.work_ratio}}</span>%</span>
							</div>
						</div>

						<div class="_dat-course">
							<el-table :data="work_gradedat" border style="width: 100%">
								<el-table-column label="测评名称" min-width="180" prop="exam.title">
								</el-table-column>
								<el-table-column label="得分" prop="total_score" width="100">
								</el-table-column>
							</el-table>
						</div>

						<div class="_dat-bot">
							<span>此模块小计：{{work_grade?work_grade:0}} X {{RuleS.work_ratio}}% =
								<span>{{(work_grade) * (RuleS.work_ratio/100)}}</span></span>
						</div>
					</div>

					<!-- 综合测评 -->
					<div class="Grade_dat">
						<div class="_dat-on">
							<div class="">
								<span style="font-weight: 600;font-size: 20px;">综合测评</span>
							</div>
							<div class="">
								<span>模块分值权重<span
										style="color: #FF0000;font-weight: 600;">{{RuleS.text_ratio}}</span>%</span>
							</div>
						</div>
						<div class="_dat-bot">
							<span>此模块小计：{{exam_gradedat.total_score?exam_gradedat.total_score:0}} X
								{{RuleS.text_ratio}}% =
								<span>{{(exam_gradedat.total_score?exam_gradedat.total_score:0) * (RuleS.text_ratio/100)}}</span></span>
						</div>
					</div>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				GreadS: [],
				RuleS: [],
				tableData: [{
						name: '认识交通出行中的风险',
						Grade: '30'
					},
					{
						name: '认识交通出行中的风险',
						Grade: '30'
					},
					{
						name: '认识交通出行中的风险',
						Grade: '30'
					},
				],
				GradeLoading: true,
				gradeData: [],
				work_gradedat: [

				],
				work_grade: '',
				exam_gradedat: [

				],
				video_gradedat: [

				],
				dialogVisible: false,
				input1: '',

				/*
					url：课程图片
					name:课程名称
					time:开课日期
					term:学期
					grade:分数
					credit:学分
				 */
				couseList: []
			}
		},
		methods: {
			//获取成绩信息
			getGrade() {
				this.$axios.post('https://vvv.52ecode.cn/api/v1.StudentClass/index', {
					website_id: 1,
					major_id: JSON.parse(sessionStorage.getItem('InfoMation')).major_id
				}).then(res => {
					this.couseList = res.data.data
				}).catch(err => {
					console.log(err);
				})
			},

			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},

			openGradeDet(item, index) {
				this.$axios.post('https://vvv.52ecode.cn/api/v1.UserScore/index', {
					website_id: 1,
					class_id: item.id,
					idcard: JSON.parse(sessionStorage.getItem('InfoMation')).idcard,
					user_id: JSON.parse(sessionStorage.getItem('InfoMation')).id
				}).then(res => {
					if (res.data.code == 200) {
						this.work_gradedat = [];
						this.video_gradedat = res.data.data.videoscore
						this.RuleS = res.data.data.rule
						res.data.data.exam.forEach((item, index) => {
							// console.log(item);
							if (item.exam_type == '考试') {
								this.exam_gradedat = item
							} else if (item.exam_type == '作业') {
								this.work_gradedat.push(item)
								// console.log(this.work_gradedat);
								for (let i = 0; i < this.work_gradedat.length; i++) {
									for (let j = 0; j < i; j++) {
										let WorkGrade = 0;
										WorkGrade = this.work_gradedat[i].total_score + this.work_gradedat[j].total_score
										this.work_grade = WorkGrade / this.work_gradedat.length
									}

								}
							}

						})
						this.GradeLoading = false
					} else if (res.data.code == 400) {
						this.GradeLoading = true
						this.$message.error(res.data.msg);
					}

				}).catch(err => {
					console.log(err)
				})
				this.dialogVisible = true
			}
		},
		created() {
			this.GreadS = ((this.video_gradedat) * (this.RuleS.video_ratio / 100)) + ((this.work_grade ? this.work_grade : 0) * (this.RuleS.work_ratio / 100)) + ((this.exam_gradedat.total_score ? this.exam_gradedat.total_score : 0) * (this.RuleS.text_ratio / 100))
			
			this.getGrade();
			// console.log(JSON.parse(sessionStorage.getItem('InfoMation')));
		}
	};
</script>

<style lang="scss" scoped>
	.Center {
		.Grade_dat {
			margin-top: 20px;
			width: 80%;

			._dat-bot {
				background-color: #fbfbfb;
				display: flex;
				align-items: center;
				padding: 20px;
			}

			._dat-on {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #f6f6f6;
				padding: 20px;
			}
		}

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.All {
		background-color: #f2f4f7;
		padding: 20px;

		.head-search {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		.course_list {
			display: grid;
			grid-template-columns: 1fr 1fr;

			.list_item {
				.itemState {
					position: absolute;
					top: 40px;
					right: 30px;
					color: #FF0000;
					font-size: 20px;
					border: 1px solid #FF0000;
					border-radius: 50%;
					padding: 20px;
					transform: rotateZ(45deg);
				}

				// border: 1px solid #000000;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;

				.item_right {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;

					// border: 1px solid #000000;
					.item_info {
						div:nth-child(3) {
							color: #0066CC;
							cursor: pointer;
						}

						div {
							// border: 1px solid #000000;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.item_time {
						// border: 1px solid #000000;
						font-size: 14px;
						color: #ababb0;
						margin: 10px 0;
						display: flex;
						align-items: center;
						justify-content: flex-start;
					}
				}

				.item_left {
					margin-bottom: 10px;
					margin-right: 20px;

					img {
						// border: 1px solid #000000;
						border-radius: 10px;
						width: 250px;
						height: 150px;
					}
				}

				margin: 20px;
				padding: 20px;
				border-radius: 20px;
				background: #fff;
				box-shadow: 20px 20px 60px #d9d9d9,
				-20px -20px 60px #ffffff;
			}
		}
	}
</style>
